import React, { useRef, useState, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import { Radio } from 'antd';
import XLSX from 'xlsx';
import moment from 'moment';
import style from '@/pages/IndexPage.css';



function RankBarChart({ forAlarm }) {
    let echartsRef = useRef();
    let seriesData = [];
    let categoryData = [], valueData = [];
    let data = [];
    for (let i = 0; i < 8; i++) {
        data.push({ title: `冷冻泵${i + 1}#`, value: forAlarm ? 10 + Math.round(Math.random() * 5) :  600 + Math.round(10 + Math.random() * 100 ) })
    }
    data.sort((a,b)=>{
        return a.value < b.value ? 1 : -1;
    }).forEach((item) => {
        categoryData.push(item.title);
        valueData.push(item.value);
    });
    
    seriesData.push({
        type: 'bar',
        barWidth: 10,
        name: forAlarm ? '告警数' : '成本',
        data: valueData,
        itemStyle: {
            color: forAlarm ? '#ff7d00' : '#165dff',
        },
    });
        

    return (
        
                <ReactEcharts
                    ref={echartsRef}
                    style={{ height: '100%' }}
                    notMerge={true}
                    option={{
                        tooltip: {
                            trigger: 'axis',
                        },
                        
                        grid: {
                            top: 20,
                            left: 20,
                            right: 60,
                            bottom: 10,
                            containLabel: true,
                        },
                        dataZoom: [
                            {
                                type: 'slider',
                                show: true,                               
                                right: '20px',
                                yAxisIndex: [0],
                                startValue: 0,
                                endValue: 10
                            },
                        ],
                        xAxis: {
                            type: 'value',
                            position: 'top',
                            silent: false,
                            name: forAlarm ? '件' : '元',
                            nameTextStyle:{ color:'rgba(0, 0, 0, 0.65)' },
                            minInterval: 1,
                            splitLine: {
                                show: false,
                            },
                            splitArea: {
                                show: false,
                            },
                            axisLabel: {
                                show: true,
                                color: 'rgba(0, 0, 0, 0.65)',
                            },
                            axisTick: { show: false },
                            axisLine: { show: true, lineStyle: { color: '#f0f0f0' } },
                        },
                        yAxis: {
                            type: 'category',
                            data: categoryData,
                            inverse: true,
                            splitArea: {
                                show: false,
                            },
                            splitArea: {
                                show: false,
                            },
                            axisLine: { show: false },
                            axisTick: { show: false },

                            axisLabel: {
                                show: true,
                                color: 'rgba(0, 0, 0, 0.65)',
                            },
                        },
                        series: seriesData,
                    }}
                />
        
    );
}

export default React.memo(RankBarChart);
